<template>
  <div>
    <el-row style="margin-top: 15px;">
      <span style="margin-top: 10px;margin-left: 15px;margin-top: 25px;font-size: 14px;">车牌号码：</span>
      <el-input size="mini" placeholder="请输入车牌号码" style="width: 220px; margin-right: 10px;" />
      <span style="margin-top: 10px;margin-left: 15px;margin-top: 25px;font-size: 14px;">车主姓名：</span>
      <el-input size="mini" placeholder="请输入车主姓名" style="width: 220px; margin-right: 10px;" />
      <span style="margin-top: 10px;margin-left: 15px;margin-top: 25px;font-size: 14px;">状态：</span>
      <el-select size="mini" placeholder="未选择" style="width: 220px; margin-right: 10px;">
        <el-option label="全部" value="" />
        <el-option label="可用" value="" />
        <el-option label="已过期" value="" />
      </el-select>
      <el-button type="primary" size="mini" style="border-radius: 5px;">查询</el-button>
    </el-row>
    <el-row style="margin-top: 10px;margin-left: 15px;">
      <el-button type="primary" size="mini" style="border-radius: 5px;">添加月卡</el-button>
      <el-button type="primary" size="mini" style="border-radius: 5px;">批量删除</el-button>
    </el-row>
    <!-- 表格 -->
    <el-table :data="list" style="width: 100%; margin-top: 20px;">
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" type="index" label="序号" width="50" />
      <el-table-column align="center" prop="personName" label="车主名称" />
      <el-table-column align="center" prop="phoneNumber" label="联系方式" />
      <el-table-column align="center" prop="carNumber" label="车牌号码" />
      <el-table-column align="center" prop="carBrand" label="车辆品牌" />
      <el-table-column align="center" prop="totalEffectiveDate" label="剩余有效天数" />
      <el-table-column align="center" prop="cardStatus" label="状态">
        <template v-slot="{row}">
          <span>{{ row.cardStatus==0? '可用' : '已过期' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template>
          <el-button type="text" size="mini">续费</el-button>
          <el-button type="text" size="mini">查看</el-button>
          <el-button type="text" size="mini">编辑</el-button>
          <el-button type="text" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <!-- 分页 -->
      <el-pagination
        :page-sizes="[10,20,50,100]"
        :page-size="pageParams.pagesize"
        :current-page="pageParams.page"
        :total="pageParams.total"
        layout="total ,prev, pager, next, sizes "
        @current-change="changePage"
        @size-change="changecurrent"
      />
    </el-row>
  </div>
</template>

<script>
import { getMonthlyPassListAPI } from '@/api'

export default {
  data() {
    return {
      loading: false,
      pageParams: {
        page: 1,
        pagesize: 5,
        total: 0
      },
      list: []
    }
  },
  created() {
    this.getMonthlyPassList()
  },
  methods: {
    async getMonthlyPassList() {
      this.loading = true
      const { rows, total } = await getMonthlyPassListAPI(this.pageParams)
      this.list = rows
      this.pageParams.total = total
      this.loading = false
    },
    async changePage(newPage) {
      this.loading = true
      this.pageParams.page = newPage
      await this.getMonthlyPassList()
      this.loading = false
    },
    async changecurrent(newcurrent) {
      this.loading = true
      this.pageParams.pagesize = newcurrent
      await this.getMonthlyPassList()
      this.loading = false
    }
  }
}
</script>

<style>
/* 你可以在这里添加自定义样式 */
</style>
